<template>
  <div class="left-top">
    <!-- 左侧上部组件内容 -->
    <el-row>
      <el-col :span="17">
        <h2 v-if="tableData.typels == '0'">编辑模板信息</h2>
        <h2 v-else-if="tableData.typels == '1'">查看模板信息</h2>
        <h2 v-else>新增模板信息</h2>
        <!-- <p>tableData1 {{ tableData }}</p> -->
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="goback()" size="mini">返回</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="storages(formInline)" size="mini"
          >暂存</el-button
        >
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="saves(formInline)" size="mini"
          >提交</el-button
        >
      </el-col>
    </el-row>
    <div style="width: 90%;margin-top: 1rem;">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="模板名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="进件通路" prop="incomingPassage">
          <el-input v-model="ruleForm.incomingPassage"></el-input>
        </el-form-item>
        <el-form-item label="模板总分" prop="totalScore">
          <el-input v-model="ruleForm.totalScore"></el-input>
        </el-form-item>
        <el-form-item label="模板备注">
          <el-input v-model="ruleForm.remark"></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "LeftTopComponent",
  props: ["tableData", "option"],
  data() {
    return {
      ruleForm: {
        name: this.tableData.name, //问题名称
        incomingPassage: this.tableData.incomingPassage, //进件通道
        totalScore: this.tableData.totalScore, //模板总分
        remark: this.tableData.remark //模板备注
      },
      rules: {
        name: [{ required: true, message: "请输入模板名称", trigger: "blur" }],
        incomingPassage: [
          { required: true, message: "请输入进件通路", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    goback() {
      //返回按钮
      this.$emit("goback");
    },
    storages() {
      //暂存按钮
      this.$emit("storages", this.ruleForm);
    },
    saves() {
      //保存按钮
      this.$emit("saves", this.ruleForm);
    }
  }
};
</script>

<style scoped>
.left-top {
  /* 样式 */
  border-bottom: 1px solid #000000;
}
</style>
